<template>
    <div>
        <!-- 页头 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>部门分类</el-breadcrumb-item>
            <el-breadcrumb-item>分类编辑</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <!-- 提醒 -->
            <el-alert
            title="此页面只能进行部门分类的添加与删除（最高级为导航栏 - 不可添加或删除）"
            type="info"
            :closable="false"
            show-icon>
            </el-alert>
            <!-- 树形 -->
            <el-tree
            :data="allBranchList.navigation"
            :props="cateProps"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            :render-content="renderContent">
            </el-tree>
        </el-card>
        
        <!-- 添加分类 -->
        <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form :model="addForm" ref="addFormRef">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="addForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类简介" prop="other">
                <el-input type="textarea" v-model="addForm.other" autocomplete="off"></el-input>
             </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="delBack('addFormRef')">取 消</el-button>
            <el-button type="primary" @click="addBranch('addFormRef')">确 定</el-button>
        </div>
        </el-dialog>

        <!-- 编辑分类 -->
        <el-dialog title="编辑分类" :visible.sync="editFormVisible">
        <el-form :model="editForm" ref="editFormRef">
            <el-form-item label="分类名称" prop="navigation">
                <el-input v-model="editForm.navigation" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分类简介" prop="include">
                <el-input type="textarea" v-model="editForm.include" autocomplete="off"></el-input>
             </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="editBack('editFormRef')">取 消</el-button>
            <el-button type="primary" @click="editBranch('editFormRef')">确 定</el-button>
        </div>
        </el-dialog>
    </div> 
</template>

<script>  
let id = 1000
export default {
    data() {
        return {
            allBranchList: [], 
            cateProps: {
                label: 'navigation',
                children: 'deps',
            },
            // 添加
            dialogFormVisible: false,
            // 添加的名字
            addForm: {
                name: '',
                other: '', // 子级部门简介
            },
            // 临时父级id
            FathId: '',
            // 编辑
            editFormVisible: false,
            editForm: {}
        }
    },
    mounted() {
        this.getAllBranchList()
    },
    methods: {
        append(data) {
            console.log(data);
            this.FathId = data.navId  // 临时的父级id
            this.dialogFormVisible = true
            const newChild = { 
                id: id++, 
                label: this.addForm.name, 
                children: []
            };
            if (!data.children) {
                this.$set(data, 'children', []); // 对象 属性名 内容    
            }
            data.children.push(newChild);
        },
        edit(data) {
            console.log(data);
            this.editForm = data
            this.FathId = data.navId  // 临时的父级id
            this.editFormVisible = true
        },
        remove(node, data) {
            console.log(data.navId);
            this.delBranch(data.navId)

        },
        renderContent(h, { node, data, store }) {
            // console.log(node);
            return (
            <span class="custom-tree-node">
                <el-tag size="mini" type="success">{node.label}</el-tag>
                <span>
                <el-button size="mini" type="text" on-click={ () => this.append(data) }>添加</el-button>
                <el-button size="mini" type="text" on-click={ () => this.edit(data) }>编辑</el-button>
                <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>删除</el-button>
                </span>
            </span>);
        },
        // 获取所有部门
        async getAllBranchList() {
            const {data: res} = await this.$http.get('/coreService/navigation/getAllAndChild')
            if(res.status != 20000) {
                this.$message.error("获取部门失败") 
            }
            this.allBranchList = res.data
        },
        delBack(addFormRef) {
            this.dialogFormVisible = false
            this.$refs[addFormRef].resetFields() // 表单置空
        },
        // 添加
        addBranch(addFormRef) {
            // 需要获取临时的父级id
            console.log(this.FathId);
            let params = {
                depName: this.addForm.name,
                depParent: this.FathId,
                other: this.addForm.other 
            }
            this.$http.post("/coreService/department/addChild",params)
            .then((res) => {
                if(res.data.status === 2000) {
                    this.FathId = ''  // 让临时的id置为空
                }
                this.getAllBranchList()
                this.dialogFormVisible = false
            })
            .catch((err) => {
                console.log(err);
            })
             this.$refs[addFormRef].resetFields() // 表单置空
        },
        // 编辑
        editBack(editFormRef) {
            this.editFormVisible = false 
        },
        editBranch(editFormRef) {
            console.log(123);
            let params = {
                depName: this.editForm.navigation,
                // navId: this.FathId,
                id: this.FathId,
                other: this.editForm.include
            }
            this.$http.put("/coreService/department/updateById",params)
            .then((res) => {
                if(res.data.status === 20000) {
                    console.log(res);
                    this.FathId = ''  // 让临时的id置为空
                    this.getAllBranchList()
                    this.editFormVisible = false
                }
            })
            .catch((err) => {
                console.log(err);
            })
        },
        // 删除部门
        async delBranch(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该文件及【下属的所有栏目】, 是否继续?', '提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if(confirmResult !== 'confirm'){
                this.$message.info("已取消删除")
            }else {
                this.$http.delete("/coreService/navigation/delById?id=" + id)
                .then((res) => {
                    if(res.data.status) {
                        this.$message.success("删除成功")
                    }
                    this.getAllBranchList()
                })
                .catch((err) => {
                    console.log(err);
                })
            }
        }
    },
}
</script>

<style lang="less" scoped>
.el-tree {
    margin-top: 20px;
}
</style>

<style>
.custom-tree-node {
    width: 100%;
    display: flex;
    justify-content: space-between;  
}
</style>